import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router' // 导入抽离的路由列表
import { setTitle } from '@/lib/util'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash', // 路由模式，history需要后端配合
  routes // 简写
})

// 全局的路由守卫
const HAS_LOGINED = true // 模拟是否登录

router.beforeEach((to, from, next) => {
  // to：是即将跳转的路由对象
  // from：当前将要离开的路由对象
  // next：是即将跳转的路由对象

  to.meta && setTitle(to.meta.title) // 设置网站的页面的title ，如果to.meta有值就执行后面的，跟if判断一样

  if (to.name !== 'login') { // 如果当前路由不是登录页面
    if (HAS_LOGINED) next() // 如果已经登录，就跳转到下一个路由
    else next({ name: 'login' }) // 如果没有登录，就跳转登录页， 这是命名路由跳转，也可以直接传字符串的路由地址'/login'
  } else { // 如果是登录页，也要判断是否登录，如果用户在地址栏手动输入了login
    if (HAS_LOGINED) next({ name: 'home' }) // 如果登录了，就跳转到首页
    else next()// 如果没登录，就同意跳转登录页
  }
})

// router.beforeResolve 也是一个全局的路由守卫
// 和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

// 全局的路由钩子
router.afterEach((to, from) => {
  // 路由跳转完成后可以做的事情，如果路由显示动画
  // logining = false

})

/**
 * 导航解析流程:
 * 1. 导航被触发
 * 2. 在即将离开的页面组件里调用离开守卫 beforeRouteLeave (组件内的路由守卫)
 * 3. 调用全局的前置守卫 beforeEach (全局守卫)
 * 4. 在重用的组件里调用 beforeRouteUpdate  (组件内的路由守卫)
 * 5. 调用路由独享的守卫 beforeEnter  (路由独享的守卫)
 * 6. 解析异步路由组件
 * 7. 在即将进入的页面组件里调用 beforeRouteEnter  (组件内的路由守卫)
 * 8. 调用全局的解析守卫 beforeResolve (全局守卫)
 * 9. 导航被确认
 * 10. 调用全局的后置守卫 afterEach  (全局守卫)
 * 11. 触发DOM更新
 * 12. 用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数  (组件内的路由守卫)
 */

export default router
